<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台首页</title>
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/ele/index.css">
</head>
<body>
<div id="app" v-cloak v-loading="loading">
    <div class="main">
        <div class="header">
            <el-menu default-active="1" mode="horizontal" background-color="#545c64" @select="changeMenu"
                     text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1">Dashboard</el-menu-item>
                <el-menu-item index="2">客户信息</el-menu-item>
                <div class="user-tools">
                    <el-dropdown trigger="click" @command="handleCommand">
                      <span class="el-dropdown-link">
                        管理员<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit">修改密码</el-dropdown-item>
                            <el-dropdown-item command="loginout">注销登陆</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-menu>
        </div>
        <div class="content">
            <el-row class="statistics">
                <el-col class="item" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="card color_1">
                        <div class="title">
                            今日新增
                        </div>
                        <div class="num">{{dataSet.today}}</div>
                    </div>
                </el-col>
                <el-col class="item" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="card color_2">
                        <div class="title">
                            本周新增
                        </div>
                        <div class="num">{{dataSet.week}}</div>
                    </div>
                </el-col>
                <el-col class="item" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="card color_3">
                        <div class="title">
                            本月新增
                        </div>
                        <div class="num">{{dataSet.month}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <div class="chart"></div>
            </el-row>
        </div>
    </div>
    <!--修改密码-->
    <el-dialog title="修改密码" :visible.sync="editPassBox" width="400px" center>
        <span>
            <el-form label-width="80px">
              <el-form-item label="旧密码">
                <el-input v-model="edit.oldpass" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="edit.newpass" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="重复密码">
                <el-input v-model="edit.repass" size="mini"></el-input>
              </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="editPassBox = false" size="mini">取 消</el-button>
    <el-button type="primary" @click="editPassSubmit" size="mini" :loading="btnLoding">确 认 修 改</el-button>
  </span>
    </el-dialog>
</div>
<script src="__PUBLIC__/js/vue.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/babel.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/babel-polyfill.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/ele/index.js" type="text/javascript"></script>
<script type="text/babel">
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                dataSet:{
                    "today":0,
                    "week":0,
                    "month":0,
                },
                editPassBox: false,
                edit: {
                    oldpass: "",
                    newpass: "",
                    repass: "",
                },
                btnLoding: false,
                loading:false
            }
        },
        methods: {
            editPassSubmit: function () {
                var that = this
                this.btnLoding = true
                $.ajax({
                    url: "./editPass",
                    type: 'post',
                    data:that.edit,
                    success: function (res) {
                        if (res.code == 200) {
                            that.btnLoding = false;
                            location.href=res.redirect
                        } else {
                            alert(res.msg)
                            that.btnLoding = false;
                        }
                    }
                })
            },
            handleCommand: function (command) {
                if (command == 'edit') {
                    this.editPassBox = !this.editPassBox
                } else if (command == 'loginout') {
                    this.$confirm('确认退出系统么？')
                        .then(_ => {
                            location.href = "{:url('admin/index/loginout')}"
                        })
                        .catch(_ => {
                        });
                }
            },
            changeMenu: function (val) {
                if (val == 1) {
                    location.href = "{:url('admin/index/index')}"
                } else if (val == 2) {
                    location.href = "{:url('admin/index/consumer')}"
                }
            }
        },
        created: function () {
            var that=this
            $.ajax({
                url: "./indexData",
                type: 'post',
                success: function (res) {
                    if (res.code == 200) {
                        that.dataSet.week = res.data.week;
                        that.dataSet.today = res.data.today;
                        that.dataSet.month = res.data.month;
                        that.loading=false
                    } else {
                        alert(res.msg)
                        that.loading=false
                    }
                }
            })
        },
        mounted: function () {

        }
    })
</script>
</body>
</html>
